import React from 'react';
import { inject, observer } from 'mobx-react';
import { Spin } from 'antd';
import { WeaPopoverHrm } from 'ecCom';
import { WeaMessageCenter } from 'comsMobx';

import { WeaPortalLayout } from 'weaPortalPublic';

import E8Theme from './ecology8';
import E9Theme from './ecology9';
import E9ThemeLayout2 from './ecology9/layout2';
import E9ThemeLayout3 from './ecology9/layout3';
import E9ThemeLayout4 from './ecology9/layout4';
import E9ThemeLayout5 from './ecology9/layout5';
import { getSearchParams } from '../../util/themeUtil';

@inject('portalThemeStore')
@observer
class Theme extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    const { location = {}, portalThemeStore } = this.props;
    const params = { ...getSearchParams(window.location.search), ...(location.query || {}) };
    portalThemeStore.getThemeInfo(params);
    portalThemeStore.getThemeConfig(params);
  }

  componentDidMount() {
    const { portalThemeStore } = this.props;
    portalThemeStore.doAfterThemeRenderEvent();
  }

  componentWillUnmount() {
    const { portalThemeStore } = this.props;
    portalThemeStore.removePlugins();
  }

  render() {
    const { location = {}, portalThemeStore } = this.props;
    const { loading, customloading, pluginloading, themeInfo = {} } = portalThemeStore;
    const { themeType, themeLayoutType, layoutData = {} } = themeInfo;

    if (loading) {
      const loadingStyle = {
        position: 'absolute',
        top: '50%',
        width: '100%',
        height: '32px',
        marginTop: '-16px',
        textAlign: 'center',
      };
      return <Spin ecId={`${(this && this.props && this.props.ecId) || ''}_Spin@qj5rss`} spinning={true} size="large" style={loadingStyle} />;
    }

    let themeCom = <div />;
    if (themeType == 'ecology8') {
      themeCom = <E8Theme ecId={`${(this && this.props && this.props.ecId) || ''}_E8Theme@09l3wo`} {...this.props} />;
    } else if (themeType == 'ecology9') {
      if (themeLayoutType == '1') {
        themeCom = <E9Theme ecId={`${(this && this.props && this.props.ecId) || ''}_E9Theme@8021o7`} {...this.props} />;
      } else if (themeLayoutType == '2') {
        themeCom = <E9ThemeLayout2 ecId={`${(this && this.props && this.props.ecId) || ''}_E9ThemeLayout2@ma5tdf`} {...this.props} />;
      } else if (themeLayoutType == '3') {
        themeCom = <E9ThemeLayout3 ecId={`${(this && this.props && this.props.ecId) || ''}_E9ThemeLayout3@e31q63`} {...this.props} />;
      } else if (themeLayoutType == '4') {
        themeCom = <E9ThemeLayout4 ecId={`${(this && this.props && this.props.ecId) || ''}_E9ThemeLayout4@evdrb8`} {...this.props} />;
      } else if (themeLayoutType == '5') {
        themeCom = <E9ThemeLayout5 ecId={`${(this && this.props && this.props.ecId) || ''}_E9ThemeLayout5@aafrqk`} {...this.props} />;
      } else {
        themeCom = <E9Theme ecId={`${(this && this.props && this.props.ecId) || ''}_E9Theme@5bqgx6`} {...this.props} />;
      }
    } else if (themeType == 'ECustom') {
      const { layoutId, layoutType, layoutCustom, layoutConfig = {}, layoutUUID } = layoutData;
      if (layoutCustom == '1') {
        if (customloading && window[layoutConfig.module]) {
          const ECustomTheme = window[layoutConfig.module].com[layoutConfig.component];
          themeCom = <ECustomTheme ecId={`${(this && this.props && this.props.ecId) || ''}_ECustomTheme@wruomq`} {...this.props} />;
        } else if (window.rewritePortalTheme && typeof window.rewritePortalTheme == 'function') {
          themeCom = window.rewritePortalTheme({ ...this.props }, { id: layoutUUID });
        }
      } else {
        themeCom = (
          <WeaPortalLayout
            ecId={`${(this && this.props && this.props.ecId) || ''}_WeaPortalLayout@io210g`}
            id={layoutId}
            layoutId={layoutId}
            layoutType={layoutType}
            {...this.props}
          />
        );
      }
    } else {
      themeCom = <E9Theme ecId={`${(this && this.props && this.props.ecId) || ''}_E9Theme@6vjpbq`} {...this.props} />;
    }

    return (
      <div style={{ width: '100%', height: '100%' }}>
        <WeaPopoverHrm ecId={`${(this && this.props && this.props.ecId) || ''}_WeaPopoverHrm@y37a6e`} />
        {!pluginloading && (
          <WeaMessageCenter.FixedPop
            ecId={`${(this && this.props && this.props.ecId) || ''}_WeaMessageCenter.FixedPop@j062ma`}
            systemSetStore={WeaMessageCenter.store}
          />
        )}
        {themeCom}
      </div>
    );
  }
}

export default Theme;
